<script setup>
import { useCategory } from '@/store/Category';
import { computed, onMounted, ref, nextTick } from 'vue';
import { getBannerApi } from '@/api/banner';

const Category = useCategory()
const banner = ref([])
//定时器

const goods = computed(() => Category.food)
const getBannerData = async () => {


    //导航
    await Category.getData()

    //轮播图
    const res = await getBannerApi(); // await 会等待Promise完成
    if (res && res.code === "1" && res.result) {
        banner.value = res.result; // 直接取 res.result，不是 res.data.result
    } else {
        banner.value = [];
        console.warn("接口返回异常或数据为空", res);
    }
    // 使用 nextTick 确保 DOM 更新完成后再操作
    await nextTick()

    // 确认数据后再检查DOM
    const imgs = document.querySelectorAll('.banner-right img')
    console.log("找到的img元素数量:", imgs.length) // 调试信息

    if (imgs.length > 0) {
        let currentIndex = 0
        setInterval(() => {
            imgs.forEach(item => {
                item.style.display = "none"
            });

            // 安全检查：确保 currentIndex 对应的元素存在
            if (imgs[currentIndex]) {
                imgs[currentIndex].style.display = "block"
            }

            currentIndex = currentIndex + 1

            if (currentIndex >= imgs.length) {
                currentIndex = 0
            }

        }, 2000)
    } else {
        console.warn("未找到轮播图元素")
    }


}
onMounted(() => getBannerData())
</script>

<template>
    <div class="banner">
        <div class="baner-left">
            <div class="list">
                <ul class="list-ul">
                    <li v-if="goods" v-for="item in goods" class="list-item-first">
                        <a href="" class="good-item">{{ item.name }}</a>

                        <ul>
                            <li v-for="item in item.children.slice(0, 2)"><a href="">{{ item.name }}</a> </li>
                        </ul>

                        <div class="list-item-second">
                            <div v-for="val in item.goods">
                                <img :src="val.picture" alt="">
                                <p>{{ val.name }}
                                <h2>{{ val.price }}</h2>
                                </p>

                            </div>
                        </div>


                    </li>
                </ul>

            </div>
        </div>

        <div class="banner-right">
            <div v-for="value in banner">

                <img :src="value.imgUrl" alt="">
            </div>

        </div>
    </div>
</template>

<style scoped lang="scss">
.banner {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    background-color: bisque;
    position: relative;
}

.baner-left {
    width: 25%;
    height: 500px;
    background-color: #2b2b2b;
    position: absolute;
    opacity: 0.95;
}

.banner-right {
    width: 100%;
    height: 500px;
    background-color: aquamarine;

    img {
        display: none;
        width: 100%;
        height: 500px;
    }

}

.list {
    width: 100%;
    height: 500px;

    .list-ul {
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;

    }

}

.list-item-first {

    display: flex;
    justify-content: space-between;
    padding: 10px;

    a {
        width: 30%;
        color: #fefefe;

    }

    ul {
        width: 50%;
        display: flex;
        justify-content: space-around;
    }
}

.list-item-first:hover {
    background-color: $xtxColor;
}

.list-item-first:hover .list-item-second {
    display: block;
}

.list-item-second {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 800px;
    height: 500px;
    background-color: #fefefe;
    text-align: center;

    div {
        width: 30%;
        float: left;
        height: 90px;
        margin-top: 50px;
        margin-left: 20px;
        display: flex;
        justify-content: space-between;

    }

    img {
        width: 90px;
        height: 90px;

    }

    h2 {
        line-height: 45px;

    }
}
</style>